<script setup>

</script>

<script setup>
</script>

<template>
  <div class="footer">
    <footer>
      <div class="add_me">
        <div><a href="#">加入我们</a></div>
        <div><a href="#">加入我们</a></div>
        <div><a href="#">加入我们</a></div>
        <div><a href="#">加入我们</a></div>
      </div>

      <ul class="footer2">
        <li><a href="#">攒足我们</a></li>
        <li class="divider"></li>
        <li><a href="#">攒足我们</a></li>
        <li class="divider"></li>
        <li><a href="#">攒足我们</a></li>
        <li class="divider"></li>
        <li><a href="#">攒足我们</a></li>
        <li class="divider"></li>
        <li><a href="#">攒足我们</a></li>
      </ul>

      <div class="footer3">
        <div>不良信息举报邮箱: 5shijie@service.netease.com &nbsp;&nbsp;&nbsp;&nbsp;客服热线：18956895</div>
        <div>互联网宗教信息服务许可证：洁（2024）0000121)&nbsp;&nbsp;&nbsp;&nbsp;增值电信业务经营许可证：洁A2-20240198&nbsp;&nbsp;&nbsp;&nbsp;洁B2-20090151-18  工业和信息化部备案管理系统网站</div>
        <div>洁music公司版权所有©2000-2024&nbsp;&nbsp;&nbsp;&nbsp;洁音乐科技有限公司运营：&nbsp;&nbsp;浙网文[2024] 0900-042号&nbsp;&nbsp; 洁公网安备 33sfe42013307号</div>
      </div>
    </footer>
  </div>
</template>



<style scoped>
.footer {
  width: 100%; /* 占满宽度 */
  background-color: #333333; /* 背景色 */
  color: whitesmoke; /* 字体颜色 */
  padding: 20px 0; /* 内边距 */
  text-align: center; /* 居中对齐 */
  font-size: 14px;
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); /* 添加顶部阴影 */
}

.add_me {
  display: flex;
  justify-content: center; /* 水平居中 */
  gap: 50px; /* 子项间距 */
}

.add_me a {
  text-decoration: none;
  color: whitesmoke;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.add_me a:hover {
  color: #4ea5ff;
  background-color: #222222;
}

.footer2 {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  gap: 15px;
  margin-bottom: 15px;
}

.footer2 li a {
  text-decoration: none;
  color: whitesmoke;
  font-size: 14px;
}

.footer2 li a:hover {
  color: #4ea5ff;
}

.footer2 .divider {
  width: 1px;
  height: 16px;
  background-color: #999;
}

.footer3 {
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: #ccc;
}


</style>



